<template>
	<div>
		<div class="wrap">
			<div class="tableWrap">
				<div class="searchWrap">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
					  <el-date-picker
					        v-model="formInline.createTime"
					        align="right"
					        type="date"
							value-format="yyyy-MM-dd"
					        placeholder="选择日期">
					      </el-date-picker>
					    <el-button type="primary" class="searchBtn" @click="onSearch">查询</el-button>
					  </el-form-item>
					</el-form>
				</div>
				<tableInfo ref="table" :table="table"></tableInfo>
				<div class="paginationWrap">
					<pageCon ref="page" :total="total" @changePage="changePage"></pageCon>
				</div>
			</div>
			<div>
				<el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
					<!-- <el-form-item label="营收类型" prop="businessTypeName">
						<el-radio-group v-model="form.businessTypeName">
							<el-radio v-for="(item, index) in businessTypeList" :key="index" :label="item.label" :value="item.id"></el-radio>
						</el-radio-group>
					</el-form-item>
			
					<el-form-item label="地址类型" prop="addressTypeName">
						<el-radio-group v-model="form.addressTypeName">
							<el-radio v-for="(item, index) in addressTypeList" :key="index" :label="item.label" :value="item.id"></el-radio>
						</el-radio-group>
					</el-form-item> -->
			
					<!-- <el-form-item label="商品名称" prop="goodsName">
						<el-input v-model="form.goodsName"></el-input>
					</el-form-item> -->
			
					<el-form-item label="金额" prop="goodsPrice"><el-input v-model="form.goodsPrice" type="number"></el-input></el-form-item>
			
					<el-form-item label="备注" prop="remarks"><el-input v-model="form.remarks" type="text"></el-input></el-form-item>
			
					<el-form-item>
						<el-button type="" @click="reset('form')">重置</el-button>
						<el-button type="primary" @click="onSubmit('form')">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import tableInfo from '../../../components/table.vue';
import pageCon from '../../../components/page.vue';

import api from '@/api';
export default {
	components: {
		tableInfo,
		pageCon
	},
	props: {
	
	},
	data() {
		return {
			formInline:{
				createTime:''
			},
			addressTypeList: [
				{
					label: '健身房',
					id: 1
				},
				{
					label: '酒吧',
					id: 2
				},
				{
					label: '其它',
					id: 3
				}
			],
			businessTypeList: [
				{
					label: '收入',
					id: 1
				},
				{
					label: '支出',
					id: -1
				}
			],
			form: {
				businessTypeName: '收入',
				businessType: 1,
				addressTypeName: '酒吧',
				addressType: 2,
				goodsName: '',
				goodsPrice: '',
				remarks: ''
			},
			rules: {
				goodsName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				goodsPrice: [{ required: true, message: '请输入金额', trigger: 'blur' }]
			},
			table: {
				loading: false,
				hasSelect: false,
				hasClickEvent: false,
				highlight: true,
				labelProps: [
					{ label: '日期', prop: 'createTime',width:200 },
					// { label: '名称', prop: 'goodsName' },
					{ label: '金额', prop: 'goodsPrice' },
					// { label: '地址类型', prop: 'addressTypeName' },
					// { label: "营收类型", prop: "businessTypeName", show: "template" },
					{ label: "备注", prop: "remarks", show: "template" },
				],
				data: []
			},
			total: 0,
			pageNo:1
		};
	},
	mounted() {

	},
	methods: {
		onSearch(){
			this.pageNo = 1
			 this.initList();
		},
		changePage(val) {
		  this.currentPage = val;
		  this.pageNo = val
		  this.initList(val);
		},
		initList() {
			api.income.getIncome({ 
				pageNo:this.pageNo, 
				pageSize:10,
				goodsName:'',
				startTime: this.formInline.createTime && this.formInline.createTime+' 00:00:00',
				stopTime: this.formInline.createTime && this.formInline.createTime+' 23:59:59' ,
				addressType: 2,
				isTest: ''
				})
				.then(res => {
					this.table.data = res.data.result;
					this.total = res.data.total
				});
		},
		checkAddressType(label, list) {
			for (let index = 0; index < list.length; index++) {
				const element = list[index];
				if (element.label == label) {
					return element.id;
				}
			}
			return '';
		},
		onSubmit(formName) {
			// this.form.addressType = this.checkAddressType(this.form.addressTypeName, this.addressTypeList);
			// this.form.businessType = this.checkAddressType(this.form.businessTypeName, this.businessTypeList);
			// console.log(this.form);
			this.$refs[formName].validate(valid => {
				if (valid) {
					api.income.addIncome(this.form).then(res => {
						if (res.success) {
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.initList()
							this.$refs[formName].resetFields();
						} else {
							this.$message(res.msg);
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		reset(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style scoped>
	.wrap{
		display: flex;
	}
	
	.tableWrap{
		margin-right: 100px;
	}
	.searchWrap{
		text-align: left;
		margin: 20px 0;
	}
	.searchBtn{
		margin-left: 20px;
	}
	.paginationWrap{
		margin: 50px 0;
	}
</style>
